<template>
  <div class="drawer">
    <el-form>
      <el-drawer
        :visible="showDrawer"
        size="45%"
        @close="btnCancel"
      >
        <template #title>
          <h3>商品详情</h3>
        </template>

        <div class="demo-drawer__content">
          <el-row>
            <el-col :span="8">
              <span class="details_key">编号</span><span class="details_value">
                {{ good.id }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">所属</span><span class="details_value">
                {{ good.shop_name }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">名称</span><span class="details_value">
                {{ good.good_name }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">类型</span><span class="details_value">
                {{ good.types_of }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">成本价</span><span class="details_value">
                {{ good.cost_prc }}RMB
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">原价</span><span class="details_value">
                {{ good.original_prc }}RMB
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">库存量</span><span class="details_value">
                {{ good.in_stk }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">参与活动</span><span class="details_value">
                {{ good.activity }}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">热销</span><span class="details_value">
                <el-radio-group v-model="good.hot_cakes" size="mini">
                  <el-radio-button :label="true">是</el-radio-button>
                  <el-radio-button :label="false">否</el-radio-button>
                </el-radio-group>
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">是否推荐</span><span class="details_value">
                <el-radio-group v-model="good.rcmd" size="mini">
                  <el-radio-button :label="true">是</el-radio-button>
                  <el-radio-button :label="false">否</el-radio-button>
                </el-radio-group>
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">状态</span><span class="details_value">
                <el-radio-group v-model="good.sts" size="mini">
                  <el-radio-button :label="true">上架</el-radio-button>
                  <el-radio-button :label="false">下架</el-radio-button>
                </el-radio-group>
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">是否可用卷</span><span class="details_value">
                <el-radio-group v-model="good.disc" size="mini">
                  <el-radio-button :label="true">是</el-radio-button>
                  <el-radio-button :label="false">否</el-radio-button>
                </el-radio-group>
              </span>
            </el-col>
            <el-col :span="8">
              <span class="details_key">临保时长</span><span class="details_value">
                {{ good.shelf_life }}个月
              </span>
            </el-col>
          </el-row>
          <h3>商品图片</h3>
          <div class="img_display">
            <el-row :gutter="18">
              <el-col v-for="(o) in 6" :key="o" :span="8">
                <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" />
              </el-col>
            </el-row>
          </div>

          <h3>商品描述(支持富文本编辑)</h3>
          <el-input
            v-model="good.shop_des"
            class="text_region"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />

          <h3>商品参与的活动</h3>
          <div class="activity_region">
            <el-row>
              <div v-if="good.activity==='秒杀活动'">
                <el-col :span="8">
                  <span class="details_key">参与活动</span><span class="details_value">
                    {{ good.activity }}
                  </span>
                </el-col>
                <el-col :span="8">
                  <span class="details_key">账号限购</span><span class="details_value">
                    {{ good.spike.limit_number }}
                  </span>
                </el-col>
                <el-col :span="8">
                  <span class="details_key">秒杀价</span><span class="details_value">
                    {{ good.spike.prc_spike }}
                  </span>
                </el-col>
                <el-col :span="20">
                  <span class="details_key">秒杀时段</span><span class="details_value">
                    <el-time-picker
                      v-model="good.spike.sta_time"
                      style="width:40%;"
                      size="mini"
                      :picker-options="{
                        selectableRange: '18:30:00 - 20:30:00'
                      }"
                      placeholder="开始时间"
                    />
                    <el-time-picker
                      v-model="good.spike.end_time"
                      style="width:40%;"
                      size="mini"
                      arrow-control
                      :picker-options="{
                        selectableRange: '18:30:00 - 20:30:00'
                      }"
                      placeholder="结束时间"
                    />
                  </span>
                </el-col>
              </div>
              <div v-else>
                <el-col :span="8">
                  <span class="details_key">参与活动</span><span class="details_value">
                    {{ good.activity }}
                  </span>
                </el-col>
                <el-col :span="12">
                  <span class="details_key">第一件是否优惠</span><span class="details_value">
                    <el-radio-group v-model="good.disc_act.frst_ordr" size="mini">
                      <el-radio-button :label="true">是</el-radio-button>
                      <el-radio-button :label="false">否</el-radio-button>
                    </el-radio-group>
                  </span>
                </el-col>
                <el-col :span="8">
                  <span class="details_key">促销价</span><span class="details_value">
                    {{ good.disc_act.sale_prc }}
                  </span>
                </el-col>
              </div>
            </el-row>
          </div>

        </div>
        <div class="demo-drawer__footer">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOk(good)">确认</el-button>
        </div>
      </el-drawer>
    </el-form>
  </div>
</template>
<script>
import { editData } from '@/api/goods'
export default {
  props: {
    currentShopData: {
      type: Object,
      default: () => { return {} }
    },
    showDrawer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      good: {
        id: '',
        shop_name: '', // 店铺名称
        shop_id: '', // 所属店铺id
        user_id: '', // 用户id
        good_name: '', // 商品名称
        types_of: '', // 商品类型(所属一级类型/二级类型)
        types_id: '', // 类别id
        cost_prc: '', // 成本价
        original_prc: '', // 原价
        in_stk: '', // 库存
        activity: '', // 活动(不参与为空,秒杀活动为spike,打折促销为disc_act)
        hot_cakes: '', // 是否热销
        rcmd: '', // 是否推荐
        sts: '', // 当前状态(false为下架,true为上架)
        disc: '', // 是否可以用优惠券
        shelf_life: '', // 保质期
        shop_img: [], // 商品图片
        shop_des: '', // 商品描述
        spike: { // 秒杀活动
          limit_number: '', // 限购
          prc_spike: ''// 秒杀价
        },
        disc_act: { // 打折促销
          frst_ordr: false, // 首单是否优惠
          sale_prc: ''// 促销价
        }
      }
    }
  },
  methods: {
    // assignment 赋值
    assignment() {
      this.good = this.currentShopData
    },
    btnCancel() {
      console.log(213456)
      this.good = {
        id: '',
        shop_name: '', // 店铺名称
        shop_id: '', // 所属店铺id
        user_id: '', // 用户id
        good_name: '', // 商品名称
        types_of: '', // 商品类型(所属一级类型/二级类型)
        types_id: '', // 类别id
        cost_prc: '', // 成本价
        original_prc: '', // 原价
        in_stk: '', // 库存
        activity: '', // 活动(不参与为空,秒杀活动为spike,打折促销为disc_act)
        hot_cakes: '', // 是否热销
        rcmd: '', // 是否推荐
        sts: '', // 当前状态(false为下架,true为上架)
        disc: '', // 是否可以用优惠券
        shelf_life: '', // 保质期
        shop_img: [], // 商品图片
        shop_des: '', // 商品描述
        spike: { // 秒杀活动
          limit_number: '', // 限购
          prc_spike: ''// 秒杀价
        },
        disc_act: { // 打折促销
          frst_ordr: false, // 首单是否优惠
          sale_prc: ''// 促销价
        }
      }
      this.good.spike = { // 秒杀活动
        limit_number: '', // 限购
        prc_spike: ''// 秒杀价
      }
      this.good.disc_act = { // 打折促销
        frst_ordr: false, // 首单是否优惠
        sale_prc: ''// 促销价
      }
      this.$emit('update:showDrawer', false)
    },
    async btnOk(id) {
      await editData(id, this.currentShopData)
      this.$emit('update:showDrawer', false)
      this.$emit('edit')
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-drawer__footer{
    border-top: 1px solid rgb(212, 205, 205);
    padding: 10px 15px 10px 0;
    display: flex;
    justify-content: flex-end;
  }
  .text_region{
    margin: 0 5px;
  }

  .img_display{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 15px;
    .image{
      width: 188px;
      height: 130px;
      margin: 0 5px;
      img{
        width: 100%;
      }
    }
  }
  ::v-deep .el-drawer{
    min-width: 500px;
    h3{
      color: #000;
    }
  }
  .demo-drawer__content,.activity_region{
    .el-row{
      padding-left: 20px;
      .el-col{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        margin: 16px 0px;
        .details_value{
          margin-left: 25px;
        }
      }
    }
    h3{
      margin-left:20px;
    }
  }
::v-deep .el-drawer__header{
    padding-top: 0px;
    margin-bottom: 0px;
}
  ::v-deep .el-drawer__body{
  overflow: auto;
  border: 1px solid rgb(212, 205, 205);
  }
</style>
